<template>
  <el-row gutter="20">
    <el-col :span="4">
      <Nav active="home" />
    </el-col>
    <el-col :span="20">
      <el-row justify="center" class="mb-6" :gutter="20">
        <el-col :span="6">
          <el-select v-model="source" placeholder="选择视频源" @change="changeSource">
            <el-option
              v-for="item in sourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="18">
          <el-input
            v-model="input"
            placeholder="请输入视频名称"
            class="input-with-select"
            @change="Search"
          >
            <template #append>
              <!-- <el-button :icon="Search"></el-button> -->
              <el-button @click="Search" type="primary" :loading="btnLoading" :disabled="btnLoading">搜索</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <div>
        <router-view></router-view>
      </div>
    </el-col>
  </el-row>
</template>


<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref, Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMovieStore } from '@/store/index'
import Nav from './components/Nav.vue'
// store
const movieStore = useMovieStore()
// router
const router = useRouter()
const route = useRoute()

// 按钮防抖
const btnLoading: Ref = ref(false)

// 搜索输入
const input: Ref = ref('生活大爆炸')

// 视频源选择
const source: Ref = ref('tiankongzy')

const sourceList: Ref = ref([
  {
    label: '天空资源网',
    value: 'tiankongzy',
    webUrl: 'http://tiankongzy.cc',
    prefix: 'http://tiankongzy.cc/index.php/vod/search.html?wd=',
    suffix: '&submit=search',
  },
  {
    label: '想看资源网',
    value: 'xiangkanzy',
    webUrl: 'http://xiangkanzy.net',
    prefix: 'http://xiangkanzy.net/index.php/vod/search/page/1/wd/',
    suffix: '.html',
  }
])

// 视频资源
const vod: Ref = ref({
  name: null
})

onMounted(() => {
  console.log('route', route.meta);
  console.log('route', route.name);
  
})

// 改变视频源
const changeSource = (val: string) => {
  console.log('str', val)
  let res = sourceList.value.filter((ele: any) => {
    return ele.value === val
  })[0]

  movieStore.storeMovieData({
    webName: res.value,
    webUrl: res.webUrl,
    prefix: res.prefix,
    suffix: res.suffix
  })
  // setTimeout(function(){
  //   console.log('movieStore', movieStore.$state)
  // },1000)
  console.log('res', res)
}
// 1. 搜索
const Search = () => {
  console.log('input', input.value)
  btnLoading.value = true
  if (input.value.trim() === '' || input.value === null) {
    btnLoading.value = false
    ElMessage.error('请输入搜索名称')
    return
  }
  router.replace({
    name: 'list',
    query: {
      input: input.value,
      source: source.value
    }
  })
  console.log('btnLoading', btnLoading.value)
  btnLoading.value = false
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 10px;
  padding: 10px;
}
</style>
